<template>
  <div>
    <button @click="comName ='QrCode'">二维码登录</button>
    <button @click="comName ='FormLogin'">账号登录</button>
    <button @click="comName ='PhoneLogin'">手机号登录</button>
    <!-- 在一个区域里切换不同的组件：用动态组件 -->
    <!-- 他的内部其实也是在v-if和v-else-if -->
    <!-- 因为他内部相当于是v-if那么就意味着一个组件隐藏其实就销毁了 -->
    <!-- 如果用户输入了内容再切回来，内容就没了 -->
    <!-- <keep-alive include="FormLogin,QrCode"> -->
    
    <keep-alive exclude="PhoneLogin">
      <component :is="comName" />
    </keep-alive>

    <!-- <qr-code v-if="comName == 'QrCode'"/>
    <form-login v-else-if="comName == 'FormLogin'"/>
    <form-login v-else-if="comName == 'PhoneLogin'"/> -->
  </div>
</template>

<script>
import QrCode from './components/QrCode'
import FormLogin from './components/FormLogin'
import PhoneLogin from './components/PhoneLogin.vue'
export default {
  components: {
    QrCode,
    FormLogin,
    PhoneLogin
  },
  data() {
    return {
      comName: 'QrCode'
    }
  },
}
</script>

<style>

</style>